<template>
  <div id="table-options-box" class="table-options-box">
    <el-form :model="form">
      <el-form-item label="路径(url)" :label-width="formLabelWidth">
        <el-input v-model="form.url" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item v-if="false" label="表格列配置" :label-width="formLabelWidth">
        <el-button @click="addColumn">添加列</el-button>
        <el-table :data="form.columns" style="width: 100%" size="small">
          <el-table-column prop="title" label="列标题" width="120">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ scope.row.title }}
              </div>
              <el-input v-else v-model="scope.row.title" @blur="saveEdit(scope.row, 'title')" />
            </template>
          </el-table-column>
          <el-table-column prop="field" label="列字段" width="120">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ scope.row.field }}
              </div>
              <el-input v-else v-model="scope.row.field" @blur="saveEdit(scope.row, 'field')" />
            </template>
          </el-table-column>
          <el-table-column prop="width" label="固定列宽" width="120">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ scope.row['width'] }}
              </div>
              <el-input v-else v-model="scope.row['width']" @blur="saveEdit(scope.row, 'width')" />
            </template>
          </el-table-column>
          <el-table-column prop="min-width" label="最小列宽" width="120">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ scope.row['min-width'] }}
              </div>
              <el-input v-else v-model="scope.row['min-width']" @blur="saveEdit(scope.row, 'min-width')" />
            </template>
          </el-table-column>                    
          <el-table-column prop="input" label="可编辑性" width="120">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ inputListArrMap[scope.row.input] }}
              </div>
              <el-select v-else v-model="scope.row.input" placeholder="Select">
                <el-option v-for="item in inputList" :key="item.value" :value="item.value" :label="item.label">
                </el-option>
              </el-select>               
            </template>
          </el-table-column>
          <el-table-column prop="isAmount" label="金额" width="120">
            <template #default="scope">

              <el-switch
                v-model="scope.row['isAmount']" active-value="1"
                inactive-value="0"
              />
            </template>
          </el-table-column>
          <el-table-column prop="show-overflow-tooltip" label="是否有超出提示" width="120">
            <template #default="scope">
              <el-switch
                v-model="scope.row['show-overflow-tooltip']"
              />              
            </template>
          </el-table-column>          
          <el-table-column prop="dataSource" label="数据源" width="120">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ scope.row['dataSource'] }}
              </div>
              <el-input v-else v-model="scope.row['dataSource']" @blur="saveEdit(scope.row, 'dataSource')" />
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="150">
            <template #default="scope">
              <el-button v-if="!scope.row._edit" @click="editRow(scope.row)">编辑</el-button>
              <el-button v-else @click="saveRow(scope.row)">保存</el-button>
              <el-button type="danger" @click="removeRow(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item> -->
      <el-form-item label="表格列配置" :label-width="formLabelWidth">
        <el-button @click="addColumn">添加列</el-button>
        <el-table :data="[]" border style="width: 100%" size="small">
          <el-table-column v-for="(item,index) in form.columns" :key="'key'+index" :prop="item.field" :label="item.title" width="120">
            <template #header="scope">
              <div class="col-header-box">
                <el-popover placement="bottom-start" :width="1000" trigger="click">
                  <template #reference>
                    <el-button
                      type="text"
                      @click="()=>{
                        fieldSetArr.length = 0
                        item._edit = true
                        fieldSetArr.push(item)
                      }"
                    >
                      {{ item.title }}
                    </el-button>
                  </template>
                  <el-table :data="fieldSetArr" style="width: 100%" size="small">
                    <el-table-column prop="title" label="列标题" width="120">
                      <template #default="scope">
                        <div v-if="!scope.row._edit">
                          {{ scope.row.title }}
                        </div>
                        <el-input v-else v-model="scope.row.title" @blur="saveEdit(scope.row, 'title')" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="field" label="列字段" width="120">
                      <template #default="scope">
                        <div v-if="!scope.row._edit">
                          {{ scope.row.field }}
                        </div>
                        <el-input v-else v-model="scope.row.field" @blur="saveEdit(scope.row, 'field')" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="width" label="固定列宽" width="120">
                      <template #default="scope">
                        <div v-if="!scope.row._edit">
                          {{ scope.row['width'] }}
                        </div>
                        <el-input v-else v-model="scope.row['width']" @blur="saveEdit(scope.row, 'width')" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="min-width" label="最小列宽" width="120">
                      <template #default="scope">
                        <div v-if="!scope.row._edit">
                          {{ scope.row['min-width'] }}
                        </div>
                        <el-input v-else v-model="scope.row['min-width']" @blur="saveEdit(scope.row, 'min-width')" />
                      </template>
                    </el-table-column>                    
                    <el-table-column prop="input" label="可编辑性" width="120">
                      <template #default="scope">
                        <div v-if="!scope.row._edit">
                          {{ inputListArrMap[scope.row.input] }}
                        </div>
                        <el-select v-else v-model="scope.row.input" placeholder="Select">
                          <el-option v-for="item in inputList" :key="item.value" :value="item.value" :label="item.label">
                            <!-- {{ item.label }} -->
                          </el-option>
                        </el-select>               
                      </template>
                    </el-table-column>
                    <el-table-column prop="isAmount" label="金额" width="120">
                      <template #default="scope">
                        <!-- <div v-if="!scope.row._edit">
                  {{ scope.row['isAmount'] }}
                </div> -->
                        <el-switch
                          v-model="scope.row['isAmount']" active-value="1"
                          inactive-value="0"
                        />
                        <!-- <el-input v-else v-model="scope.row['isAmount']" @blur="saveEdit(scope.row, 'isAmount')" /> -->
                      </template>
                    </el-table-column>
                    <el-table-column prop="show-overflow-tooltip" label="是否有超出提示" width="120">
                      <template #default="scope">
                        <el-switch
                          v-model="scope.row['show-overflow-tooltip']"
                        />              
                      </template>
                    </el-table-column>          
                    <el-table-column prop="dataSource" label="数据源" width="120">
                      <template #default="scope">
                        <div v-if="!scope.row._edit">
                          {{ scope.row['dataSource'] }}
                        </div>
                        <el-input v-else v-model="scope.row['dataSource']" @blur="saveEdit(scope.row, 'dataSource')" />
                      </template>
                    </el-table-column>
                    <!-- <el-table-column fixed="right" width="150">
                      <template #default="scope">
                        <el-button v-if="!scope.row._edit" @click="editRow(scope.row)">编辑</el-button>
                        <el-button v-else @click="saveRow(scope.row)">保存</el-button>
                        <el-button type="danger" @click="removeRow(scope.$index)">删除</el-button>
                      </template>
                    </el-table-column> -->
                  </el-table>  
                </el-popover>                   
                <el-icon title="删除列" @click="removeRow(index)">
                  <delete />
                </el-icon>
              </div>
            </template>
            <template #default="scope">
              <div v-show="false">1</div>
            </template>
          </el-table-column>            
        </el-table>      
      </el-form-item>
      <el-form-item label="表格操作列" :label-width="formLabelWidth">
        <!-- <template #label>
          <el-link type="primary" @click="()=>{form.btns = btnsPlaceholder}">配置操作列按钮btns</el-link>
        </template>         -->
        <!-- <el-input
          v-model="form.btns" type="textarea" rows="8" autocomplete="off" 
          :placeholder="btnsPlaceholder"
        /> -->
        <el-button
          @click="()=>{
            form.btns.push({
              name: '',
              fn: '',
              fnRepeat: '',
              selectedButtonClass: ''
            });          
          }"
        >
          添加按钮
        </el-button>
        <el-table :data="form.btns" style="width: 100%" size="small">
          <el-table-column prop="name" label="name" width="120">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ scope.row.name }}
              </div>
              <el-input v-else v-model="scope.row.name" @blur="saveEdit(scope.row, 'name')" />
            </template>
          </el-table-column>
          <el-table-column prop="fn" label="fn" width="120">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ scope.row.fn }}
              </div>
              <el-input v-else v-model="scope.row.fn" @blur="saveEdit(scope.row, 'fn')" />
            </template>
          </el-table-column>
          <el-table-column prop="fnRepeat" label="fnRepeat" width="120">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ scope.row.fnRepeat }}
              </div>
              <el-input v-else v-model="scope.row.fnRepeat" @blur="saveEdit(scope.row, 'fnRepeat')" />
            </template>
          </el-table-column>
          <el-table-column prop="selectedButtonClass" label="selectedButtonClass" width="150">
            <template #default="scope">
              <div v-if="!scope.row._edit">
                {{ scope.row.selectedButtonClass }}
              </div>
              <el-input v-else v-model="scope.row.selectedButtonClass" @blur="saveEdit(scope.row, 'selectedButtonClass')" />
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="150">
            <template #default="scope">
              <el-button v-if="!scope.row._edit" @click="()=>{scope.row._edit = true;}">编辑</el-button>
              <el-button v-else @click="()=>{scope.row._edit = false;}">保存</el-button>
              <el-button type="danger" @click="()=>{form.btns.splice(scope.$index,1);}">删除</el-button>
            </template>
          </el-table-column>          
        </el-table>        
      </el-form-item>
      <el-form-item label="显示分页" :label-width="formLabelWidth">
        <el-switch v-model="form.pagination" />
      </el-form-item>
      <el-form-item label="页数选择频段" :label-width="formLabelWidth">
        <el-input v-model="form.pageList" autocomplete="off" />
      </el-form-item>
      <el-form-item label="每页显示条数" :label-width="formLabelWidth">
        <el-select v-model="form.pageSize" placeholder="Select">
          <el-option v-for="item in form.pageList" :key="item" :value="item" />
        </el-select>        
      </el-form-item>
      <el-form-item label="表格行选中" :label-width="formLabelWidth">
        <el-select v-model="form.selectRow" placeholder="Select">
          <el-option key="无" value="无" />
          <el-option key="单选" value="单选" />
          <el-option key="多选" value="多选" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive,watch,onMounted } from 'vue';
const props = defineProps({
  modelValue: {
    type: Object,
    default: ()=>{},
  },
});
const emit = defineEmits(['update:modelValue']);
// props.modelValue.pageList = props.modelValue.pageList.join(',')
// const pageOptions = [...props.modelValue.pageList]
const fieldSetArr = reactive([])
const form = reactive(props.modelValue)
const formLabelWidth = '120px';
const inputListArr = [
  {
    value:'-1',
    label:'不可编辑'
  },
  {
    value:'0',
    label:'输入框'
  },
  {
    value:'1',
    label:'下拉选'
  },
]
const inputListArrMap = inputListArr.reduce((total,cur)=>{
  total[cur.value] = cur.label
  return total
},{})
const inputList = reactive(inputListArr)
// const btnsPlaceholder = `[
//     {
//       name:'',
//       fn:'',
//       fnRepeat:'',
//       selectedButtonClass:'',
//     }
//   ]
// `
const addColumn = () => {
  let len = form.columns.length + 1
  form.columns.push({
    title: '列标题'+ len,
    field: 'field' + len,
    input: '0',
    isAmount: '0'
  });
};

const removeRow = (index) => {
  form.columns.splice(index, 1);
};

const submitForm = () => {
  console.log(form);
};
const editRow = (row) => {
  row._edit = true;
};
const saveRow = (row) => {
  row._edit = false;
};
const saveEdit = (row, field) => {
  // row._edit = false;
  // 在这里可以添加保存数据的逻辑
  // console.log(`Saved ${field} of row`, row);
};
watch(form, (newValue) => {
  // console.log('%c newValue.columns','font-size:24px;color:red;',newValue.columns)
  if (typeof newValue.pageList === 'string') {
    newValue.pageList = newValue.pageList.split(',')
  }
  // if (typeof newValue.btns === 'string'&&newValue.btns.length > 0) {
  //   newValue.btns = JSON.parse(newValue.btns)
  // }
  emit('update:modelValue', newValue);
});
onMounted(() => {
  let box = document.querySelector('#table-options-box')
  box.parentNode.style.marginLeft = '0px'
})
</script>
<style lang="scss" scoped>
.table-options-box {
  width: 100%;
  .el-form-item {
    margin-bottom: 20px !important;
  }
}
.col-setting-btn {
  display: flex;
  button{
    margin-right:'10px'
  }
}
.col-header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-icon svg {
    color: red;
    cursor: pointer;
  }
}
</style>

